<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="ui/common/taglibs::head">
</head>
<link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}">
<link th:href='@{/css/regulatory/style.css}' rel='stylesheet' />
<link th:href='@{/css/index_big.css}' rel='stylesheet' />
<style>
      
        .list-cards {
            display: flex;
            flex-wrap: wrap;
            width: 75vw;
            margin: 1.04vw auto 0 auto;
        }

        .list-card {
            width: 13.54166667vw;
            height: 9.895833333vw;
            margin: 3.125vw 2.604166667vw;
            list-style: none;
            text-align: center;
            background-size: contain;
            cursor: pointer;
        }

        .list-card:nth-of-type(1) {
            background-image: url(img/big/list-card1.png)
        }

        .list-card:nth-of-type(2) {
            background-image: url(img/big/list-card2.png)
        }

        .list-card:nth-of-type(3) {
            background-image: url(img/big/list-card3.png)
        }

        .list-card:nth-of-type(4) {
            background-image: url(img/big/list-card4.png)
        }

        .list-card:nth-of-type(5) {
            background-image: url(img/big/list-card5.png)
        }

        .list-card:nth-of-type(6) {
            background-image: url(img/big/list-card6.png)
        }

        .list-card:nth-of-type(7) {
            background-image: url(img/big/list-card7.png)
        }

        .list-card:nth-of-type(8) {
            background-image: url(img/big/list-card8.png)
        }
        .list-card:nth-of-type(9) {
            background-image: url(img/big/list-card1.png)
        }

        .list-card:nth-of-type(10) {
            background-image: url(img/big/list-card2.png)
        }

        .list-card:nth-of-type(11) {
            background-image: url(img/big/list-card3.png)
        }

        .list-card:nth-of-type(12) {
            background-image: url(img/big/list-card4.png)
        }

        .list-card:nth-of-type(13) {
            background-image: url(img/big/list-card5.png)
        }

        .list-card:nth-of-type(14) {
            background-image: url(img/big/list-card6.png)
        }

        .list-card:nth-of-type(15) {
            background-image: url(img/big/list-card7.png)
        }

        .list-card:nth-of-type(16) {
            background-image: url(img/big/list-card8.png)
        }

        .list-card span {
            margin-top: 3.4vh;
            
        }
        .list-card p {
            font-size: 1.0416vw;
            font-weight: bold;
            color: #ffffff;
            margin-top: 2.6vh;

        }
    </style>
    
<body class="panel-noscroll">
    <ul class="list-cards" id="list-cards">
       
    </ul>
</body>
<script type="text/javascript">
var menuData = [];
$(function() {
    //根据一级选项卡所选，将手风琴的数据源传过来
    var url ='';
    var list_html = '';
    if( localStorage.getItem("json") ){
        url = localStorage.getItem("json");
    }
    $.get(ctx+"/system/menu/"+url , function(data) {
        if(data) {
        	menuData = data
        	 $.each(data, function(index, item) {   
        		 list_html = list_html+'<li class="list-card" onclick="toUrl('+index+')">';
        		 list_html = list_html+'<span class="'+item.iconCls+'" style="color:#FFF;FONT-SIZE:3.5vw"></span>';
        		 list_html = list_html+'<p>'+item.text+'</p>';
        		 list_html = list_html+'</li>';
        	 });
        	 $("#list-cards").html(list_html);
        }
    });
    
});
function toUrl(index){
	var item = menuData[index];
	if(item.state == "url"){
		location = ctx+item.url
	}else{
		localStorage.setItem("json","/getMenus?menuId="+item.id);
		location = ctx+"/toPage?page=ui/big/navMenu";
	}
}
</script>
</html>